<template>
  <section>
    FlvDemo
    <!-- autoplay controls -->
    <video id="myvideo" @click="click" controls autoplay />
    <el-button @click="closeVideo">停止</el-button>
    <el-button @click="playVideo">开始</el-button>
    <el-button @click="afterFrame">追帧</el-button>
  </section>
</template>

<script>
import flv from "flv.js";
export default {
  name: "FlvDemo",
  data() {
    return {
      player: null,
      playing: false,
    };
  },
  created() {},
  mounted() {
    var video = document.querySelector("#myvideo");
    if (flv.isSupported()) {
      this.player = flv.createPlayer(
        {
          cors: true,
          type: "flv",
          isLive: true,
          hasAudio: true,
          hasVideo: true,
          // url: "http://192.168.28.188:3333/video/18188888888,1,3,1",
          // url: 'https://tx.dogevideo.com/vcloud/17/v/20190424/1556036075_818c4125ec9c8cbc7a7a8a7cc1601512/1057/e51d88e79732fb952ebdbb4a57aa628a.flv?vkey=5EEDE5&tkey=1628487319e5d041fd98&auth_key=1628501719-4kB01r799awqBxwB-0-f0a5f269c884e879e63903c0bdfadee9',
          url: 'http://192.168.1.60:6604/rtmp/ttxplayer/1628477758727/?Rjk0MUQyMUE3NzI0RTM3NThDM0Y0MEJGMTMyQTE2RUMsMSwwMTAwMDIyMDQyMDQsMSwxLDAsMA==',
          withCredentials: false,
          segments: [
            {
              cors: true,
              timestampBase: 0,
              withCredentials: false,
              // url: "http://192.168.28.188:3333/video/18188888888,1,3,1",
              // url: 'https://tx.dogevideo.com/vcloud/17/v/20190424/1556036075_818c4125ec9c8cbc7a7a8a7cc1601512/1057/e51d88e79732fb952ebdbb4a57aa628a.flv?vkey=5EEDE5&tkey=1628487319e5d041fd98&auth_key=1628501719-4kB01r799awqBxwB-0-f0a5f269c884e879e63903c0bdfadee9',
              url: 'http://192.168.1.60:6604/rtmp/ttxplayer/1628477758727/?Rjk0MUQyMUE3NzI0RTM3NThDM0Y0MEJGMTMyQTE2RUMsMSwwMTAwMDIyMDQyMDQsMSwxLDAsMA==',
            },
          ],
        },
        {
          enableWorker: false,
          lazyLoadMaxDuration: 3 * 60,
          seekType: "range",
          enableStashBuffer: false,
          autoFastForward: true,
          // enableWorker: false,
          // enableStashBuffer: false,
          // stashInitialSize: 128,
          // autoCleanupSourceBuffer:true,
          // autoFastForward: true,
          // url: 'http://192.168.28.121:3333/video/18812341234,2,1,1'
          // url: '/video/720.flv'
        }
      );
    }
    this.player.attachMediaElement(video);
    this.player.load();
    // this.$nextTick(() => {
    //   this.player.play();
    // });
  },
  methods: {
    click() {
      if (this.playing) {
        this.player.pause();
        this.playing = false;
      } else {
        this.player.play();
        this.playing = true;
      }
    },
    closeVideo() {
      this.player.destroy();
    },
    playVideo() {
      this.player.play();
    },
    afterFrame() {
      this.player.currentTime = this.player.buffered.end(0);
      this.player.play();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>